//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin pop-up-menu() {
    /* ==========================================================================
       Pop-up menu

       Default Mendix pop-up menu
    ========================================================================== */
    .popupmenu {
        position: relative;
        display: inline-flex;
    }

    .popupmenu-trigger {
        cursor: pointer;
    }

    .popupmenu-menu {
        position: absolute;
        z-index: 999;
        display: none;
        flex-direction: column;
        width: max-content;
        border-radius: 8px;
        background-color: $bg-color;
        box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);

        &.popupmenu-position-left:not(.popup-portal) {
            top: 0;
            left: 0;
            transform: translateX(-100%);
        }

        &.popupmenu-position-right:not(.popup-portal) {
            top: 0;
            right: 0;
            transform: translateX(100%);
        }

        &.popupmenu-position-top:not(.popup-portal) {
            top: 0;
            transform: translateY(-100%);
        }

        &.popupmenu-position-bottom:not(.popup-portal) {
            bottom: 0;
            transform: translateY(100%);
        }

        .popupmenu-basic-item:first-child,
        .popupmenu-custom-item:first-child {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .popupmenu-basic-item:last-child,
        .popupmenu-custom-item:last-child {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
    }

    .popupmenu-basic-divider {
        width: 100%;
        height: 1px;
        background-color: $brand-default;
    }

    .popupmenu-basic-item {
        padding: 12px 16px;
        color: $font-color-default;
        font-size: 14px;

        &:hover,
        &:focus,
        &:active {
            cursor: pointer;
            border-color: $bg-color-secondary;
            background-color: $bg-color-secondary;
        }

        &-inverse {
            color: $brand-inverse;
        }

        &-primary {
            color: $brand-primary;
        }

        &-info {
            color: $brand-info;
        }

        &-success {
            color: $brand-success;
        }

        &-warning {
            color: $brand-warning;
        }

        &-danger {
            color: $brand-danger;
        }
    }

    .popupmenu-custom-item {
        &:hover,
        &:focus,
        &:active {
            cursor: pointer;
            border-color: $bg-color-secondary;
            background-color: $bg-color-secondary;
        }
    }
}
